<template>
    <div>
        <div class="searchInput">
            <div class="kuang">
                <div>
                    充电站： <el-input placeholder="请输入充电站名称"></el-input>&emsp;&emsp13;
                </div>
                <div>
                    位置： <el-input placeholder="请输入位置"></el-input>&emsp;&emsp13;
                </div>
                <div>
                    状态：   <el-select v-model="searchState" placeholder="请选择">
                                    <el-option
                                    v-for="item in stateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
            </div>
        </div>
        <div class="btns">
            <el-button class="chaxun">查询</el-button>
            <el-button class="reset">重置</el-button>
        </div>
        </div>
        <div class="addBtn">
            <el-button class="newAdd" @click="$router.push('/addGesStation')"><i class="el-icon-plus"></i>新增</el-button>
        </div>
        <!-- 数据 -->
        <el-table
            :header-cell-style="{background:'#e8efff',color:'#000000'}"
            :data="tableData"
            :loading="loading"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="id" label="序号" width="60">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.id }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="power_num" label="充电站编号">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.power_num }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" show-overflow-tooltip label="充电站名称">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="充电站位置" width="150">
                <template v-slot="scope">
                    <div style="color:#949BBE;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                        {{ scope.row.address }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="charging_pile_num" label="充电桩数" width="100">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.charging_pile_num }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="gun_num" label="充电枪数" width="100">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.gun_num }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="reservation" label="预约">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <span v-if="scope.row.reservation == 1">支持</span>
                        <span v-else>不支持</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="parking_expenses" label="停车费用">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.parking_expenses }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template v-slot="scope">
                    <div>
                        <el-switch
                            v-model="scope.row.status"
                            :active-value=1
                            :inactive-value=0
                            @change="changeState(scope.row.id,scope.row.status)"
                            active-color="#165BFF"
                            inactive-color="#D9D9D9">
                        </el-switch>
                    </div>
                </template>
               
            </el-table-column>
            <el-table-column prop="add_time" label="创建时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.add_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template v-slot="scope">
                    <div class="scope" style="color:#949BBE;">
                        <span class="editBtn" @click="goEdit(scope.row.id)">编辑</span>
                        <span class="detailBtn" @click="goDetail(scope.row.id)">详情</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination :total="total" :currentPage="currentPage" @handleCurrentChange="handleCurrentChange" />
        <SuccessTip :isAgreeShow="isAgreeShow" :text="Success_text"/>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import SuccessTip from '@/components/SuccessTip.vue'
import api from '@/api/jur.js'
    export default {
        components:{
            Pagination,SuccessTip
        },
        data() {
            return {
                loading:true,
                searchState:'',
                isAgreeShow:false,
                // 分页
                total:10,
                currentPage:1,
                page_size:10,
                // 删除
                Success_text:'删除成功',
                stateOptions: [{
                            value: null,
                            label: '请选择'
                            }, 
                            {
                            value: true,
                            label: '启用'
                            },
                            {
                            value: false,
                            label: '禁用'
                            }],
                tableData: []
            }
        },
        created(){
            this.getPowerStations()
        },
        computed: {
        },
        methods: {
            // 分页
            handleCurrentChange(cpage) {
                this.currentPage= cpage;
                this.getPowerStations()
            },
            getPowerStations(){
                api.getStation({page:this.currentPage}).then(res=>{
                    if(res.data.code == 200){
                        this.loading = false
                        console.log('电站列表',res)
                        this.tableData = res.data.data.data
                        this.total = res.data.data.total
                    }
                })
            },
            changeState(id,status){
                api.putStationState({
                    id,
                    status:status == 1 ? 1 : 0
                }).then(res=>{
                    console.log(res)
                    if(res.data.code == 200){
                        if(status == 1){
                            this.$message.success('开启成功')
                            this.getPowerStations()
                        } else{
                            this.$message.success('关闭成功')
                            this.getPowerStations()
                        }
                    } else{
                        this.$message.warning(res.data.msg)
                    }
                })
                },
            deleteData(id){
                this.$confirm('您确定删除当前项吗', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    title:'操作提示',
                    center: true
                    }).then(() => {
                        api.delStation({data:{id}}).then(res=>{
                            console.log('删除成功',res)
                            this.isAgreeShow = true
                            this.getPowerStations()
                        })
                        let t = setInterval(() => {
                            this.isAgreeShow = false
                        }, 2000);
                    }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    
                });
            },
            goEdit(id){
                this.$router.push({
                    path:'/addGesStation',
                    query:{
                        revise:"revise", // 修改
                        id
                    }
                })
            },
            goDetail(id){
                this.$router.push({
                    path:'/addGesStation',
                    query:{
                        detail:"detail", // 查询
                        id
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.searchInput{
    text-align: left;
    font-size: 14px;
    height: 25.97px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666 !important;
}
.el-input{
    width: 280px;
    height: 35.98px;
    font-size: 11.97px;
    color: #666666;
    background: #F0F1F6;
}
.el-input__inner{
  background-color: #F0F1F6;  
}
.el-select{
    width: 280px;
    height: 35.98px;
}
.kuang{
    float: left;
}
.btns{
    float: right;
}
.el-button{
    background: transparent;
    border: none;
}
.chaxun{
    background: #165BFF;
    color: white;
}
.reset{
    background: #F0F1F6;
    color: #666666;
}
.addBtn{
    text-align: left;
    margin-top: 31.99px;
}
.newAdd{
    background: #165BFF;
    color: white;
    width: 92px;
    height: 36px;
}
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.editBtn{
    display: inline-block;
    margin-right: 7.98px;
    color: #09D796;
    cursor: pointer;
}
.detailBtn{
    margin-right: 7.98px;
    display: inline-block;
    color: #165BFF;
    cursor: pointer;
}
.deleteBtn{
    display: inline-block;
    color: #FA698D;
    cursor: pointer;
}
.confirmButtonClass{
    background: #165bff;
}
#dialog .el-dialog__header {
    padding: 20.02px 20.02px 0px;
    background: #165BFF;
    text-align: left;
    font-weight: bold;
}
#dialog .el-dialog__body{
    height: 188.02px;
}
.kuang>div{
    margin: 4.97px auto;
    display: inline-block;
}
.el-table{
    margin-top: 32px;
}
.el-button--primary {
    color: #FFF;
    background-color: #165BFF !important;
    border-color: #165BFF !important;
}
</style>
<style>
.el-message-box__header{
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    /* line-height: 16px; */
}
.el-message-box{
    width: 360px !important;
    height: 188px !important;
    background:#FFFFFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
}

.el-message-box__message{
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.el-message-box__btns{
    margin-top:38px ;
}
.el-button--small{
    width: 80px;
    height: 36px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
}
.el-button--primary{
    width: 80px;
    height: 36px;
    background:#165BFF !important;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #165BFF;
    opacity: 1;
}
.el-textarea__inner {
    background: #f0f1f6 !important;
}
</style>
<style>
.el-textarea__inner {
    background: #f0f1f6 !important;
}
</style>